<template>
  数据列表的页面，根据 moduleID 加载需要的表单的 meta <br>
  <!--表单控件-->
  <nf-grid
    ref="refGrid"
    v-grid-drag="jsonGrid"
    v-bind="jsonGrid.gridPros"
    :gridMeta="jsonGrid.gridMeta"
    :itemMeta="jsonGrid.itemMeta"
    :dataList="dataList"
    :selection="selection"
    @cell-click="dbclick"
  />
  {{selection.dataId}}<br>
  {{selection.dataIds}}<br>
  {{selection.row}}<br>
  {{selection.rows}}<br>

</template>

<script lang="ts">
  import { defineComponent, reactive, onMounted, ref } from 'vue'
  // import type { DebuggerEvent, Component} from 'vue'
  import { nfGrid, createDataList } from '../../../../lib-elp/main'
  import _gridMeta from './grid.json'
  import _formMeta from '../form/form.json'
 
  // 自定义指令
  import { _gridDrag } from '../../../../lib-elp/main'

  type person = {
    name: string
  }

  export default defineComponent({
    name: 'nf-elp-grid-page',
    directives: {
      gridDrag: _gridDrag
    },
    components: {
      nfGrid
    },
    props: {
      moduleID: { // 模块ID
        type: [Number, String],
        default: 1 
      }
    },
    setup(props) {
      // console.log('读取的 json：', _gridMeta)
      const jsonGrid = reactive(_gridMeta)

      jsonGrid.gridMeta.colOrder = [90,  101, 102, 105, 120, 121]
      
      jsonGrid.modCol = (colId: string, dragInfo: any, event: any) => {
        console.log('双击控件：', colId, dragInfo, event)
      }
      const selection = reactive({
        dataId: '', // 单选ID number 、string
        row: {}, // 单选的数据对象 {}
        dataIds: [], // 多选ID []
        rows: [] // 多选的数据对象 []
      })

      const meta = {}

      jsonGrid.gridMeta.colOrder.forEach(id => {
        meta[id] = _formMeta.itemMeta[id]
      })

      // 根据 meta 创建表单的 model
      const _dataList = createDataList(meta, 30).reverse()

      const dataList: person[] = reactive(_dataList)
      const refGrid = ref(null)
      onMounted(() => {
        console.log('refGrid', refGrid.value)
      })

      const dbclick = (a1, a2, a3, a4) => {
        console.log('双击', a1, a2, a3, a4)
      }

      return {
        dbclick,
        refGrid,
        dataList,
        selection,
        jsonGrid
      }
    }
  })

</script>